<template>
  <div class="commonTableSty">
    <s-table
      ref="table"
      class="h100"
      :columns="columns"
      :data="loadData"
      :onChangeTable="handleChangeTable"
      :rowKey="(record,index)=>index"
      :scrollX="1100"
      size="default" >
      <template slot="serviceCode" slot-scope="text">
        <table-ellipsis :text="text"></table-ellipsis>
      </template>
      <template slot="serviceName" slot-scope="text">
        <table-ellipsis :text="text"></table-ellipsis>
      </template>
      <template slot="subscriptionState" slot-scope="text">
        <table-ellipsis :text="subsServiceStatusDictCodeObj[text] || '-'"></table-ellipsis>
      </template>
      <template slot="serviceExpireDate" slot-scope="text">
        <table-ellipsis :text="$commonFun.getDateStr(text) || '-'"></table-ellipsis>
      </template>
      <template slot="action" slot-scope="text, record">
        <a @click.stop="showServiceDetail(record.serviceCode)" style="margin-right:10px">{{ $t('detail') }}</a>
        <a @click.stop="handleSupplier(record)">{{ $t('supplier') }}</a>
      </template>
    </s-table>
    <!-- 查看供应商 -->
    <supplier-view-modal
      :serviceCode="serviceCode"
      :modelId="activeVehicleInfo.modelId"
      ref="supplierRef"
    ></supplier-view-modal>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import { mapState } from 'vuex'
import subscriptionQueryApi from '@/api/modules/system/subscriptionQuery'
import SupplierViewModal from '@/views/components/SupplierViewModal'
import { carModelDetailServicesColumns } from '../config/list'
export default {
  components: {
    TableEllipsis,
    STable,
    SupplierViewModal
  },
  props: {
    time: {
      type: Number,
      default: 3571592
    }
  },
  computed: {
    ...mapState({
      activeVehicleInfo: (state) => state.vehicle.vehicleDetail ? state.vehicle.vehicleDetail : {}
    }),
    subsServiceStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('subsServiceStatusDictCode')
    }
  },
  data () {
    return {
      columns: carModelDetailServicesColumns,
      tbData: [],
      loadingData: false,
      order: '',
      // 排序列信息
      sortedInfo: null,
      serviceCode: ''
    }
  },
  created () {
    this.getPageDictData()
  },
  methods: {
    loadData (parameter) {
      const params = {
        ...this.queryParams,
        vin: this.activeVehicleInfo.vin
      }
      if (this.order) {
        params.order = this.order
      }
      return new Promise((resolve, reject) => {
        const start = (parameter.pageNo - 1) * parameter.pageSize
        const end = start + parameter.pageSize
        if (this.tbData.length) {
          // 无需要重新api获取数据，直接本地分页
          resolve({
            code: 0,
            message: '',
            data: this.tbData.slice(start, end),
            totalCount: this.tbData.length,
            totalPage: Math.ceil(this.tbData.length / parameter.pageSize)
          })
          return
        }
        subscriptionQueryApi.getServiceVehicleListByVin(params).then(res => {
          this.tbData = res.data
          resolve({
            code: 0,
            message: '',
            data: res.data.slice(start, end),
            totalCount: res.data.length,
            totalPage: Math.ceil(res.data.length / parameter.pageSize),
            pageNo: 1
          })
        }).catch(err => {
          reject(err)
        })
      })
    },
    handleChangeTable (pagination, filters, sorter) {
      const findIndex = this.columns.findIndex((item) => item.dataIndex === sorter.columnKey)
      if (sorter.order) {
        const key = sorter.columnKey
        const sorterConfig = {
          expiration: 'expiration'
        }
        const orderType = {
          ascend: 'ASC',
          descend: 'DESC'
        }
        this.order = `${sorterConfig[key]},${orderType[sorter.order]}`
        this.sortedInfo = {
          columnKey: sorter.columnKey,
          order: sorter.order
        }
        this.$set(this.columns[findIndex], 'sortOrder', sorter.order)
      } else {
        this.order = ''
        this.sortedInfo = {
          columnKey: '',
          order: ''
        }
        this.$set(this.columns[findIndex], 'sortOrder', false)
      }
      this.tbData = []
      this.refreshData()
    },
    handleSupplier (record) {
      this.serviceCode = record.serviceCode
      this.$refs.supplierRef.visible = true
    },
    getPageDictData () {
      ['getSubsServiceStatusDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    },
    refreshData (bool = true) {
      this.$refs.table && this.$refs.table.refresh(bool)
    },
    showServiceDetail (serviceCode) {
      this.$emit('showdetail', serviceCode)
    }
  }
}
</script>
